﻿@* ReSharper disable UnknownCssClass *@

@model OpusSuite.ViewModels.AccountAdmin.UserProfileModel
@{
    ViewBag.Title = ""; @* "User Profile";*@
}

<link href="@Url.Content("~/Content/themes/south-street/jquery.ui.combogrid.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.ui.combogrid-1.6.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/opusAutoComplete.js")" type="text/javascript"></script>
@*
<script src="@Url.Content("~/Scripts/Select/LanguageSelect.js")" type="text/javascript"></script>
*@
<script src="@Url.Content("~/Scripts/Select/CountrySelect.js")" type="text/javascript"></script>
@*
<script src="@Url.Content("~/Scripts/Select/DateFormatSelect.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Select/MoneyFormatSelect.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Shared/Util.js")" type="text/javascript"></script>
<div>@Html.Partial("Breadcrumbs")</div>
*@

<div id="applicationMessagesUserProfile">@Html.Partial("ApplicationMessages", "UserProfile")</div>

<header>
<h1>@ViewBag.Title</h1>
<br/>
<h2>@*Change profile settings*@</h2>
</header>
<br/>
<br/>

@using (Html.BeginForm("UserProfile", "AccountAdmin", FormMethod.Post, new { id = "profileForm" }))
{
    <fieldset>
        <legend></legend>
        <table class="table-editor">
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.UserName, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.TextBoxFor(model => model.UserName, new { @class = "editor-horiz ui-state-disabled", @disabled = "disabled" })
                </td>
            </tr>
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.DisplayName, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.TextBoxFor(model => model.DisplayName, new { @class = "editor-horiz" })
                </td>
            </tr>
            <tr>
                <td class="td-horiz-label">@Html.LabelFor(model => model.OldPassword, new { @class = "label-horiz searchLabel" })
                </td>
                <td class="td-horiz-field">@Html.PasswordFor(model => model.OldPassword, new { @class = "editor-horiz searchInput ui-state-disabled", @disabled = "disabled" })<a
                    class="searchButton" href="#" id="showPassword"></a>
                </td>
            </tr>
            <tr id="newPasswordRow" style="display: none;">
                <td class="td-horiz-label">@Html.LabelFor(model => model.NewPassword, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.PasswordFor(model => model.NewPassword, new { @class = "editor-horiz" })
                </td>
            </tr>
            <tr id="confirmPasswordRow" style="display: none;">
                <td class="td-horiz-label">@Html.LabelFor(model => model.ConfirmPassword, new { @class = "label-horiz" })
                </td>
                <td class="td-horiz-field">@Html.PasswordFor(model => model.ConfirmPassword, new { @class = "editor-horiz" })
                </td>
            </tr>
            <tr id="changePasswordRow" style="display: none;">
                <td class="td-horiz-label">
                </td>
                <td class="td-horiz-field">
                    <a href="#" id="changePassword">Change</a><a href="#" id="cancelPassword">Cancel</a>
                </td>
            </tr>
        </table>
    </fieldset>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Address</a></li>
            <li><a href="#tabs-2">Communication</a></li>
            <li><a href="#tabs-3">International</a></li>
            <li><a href="#tabs-4">Theme</a></li>
        </ul>
        <div id="tabs-1">
            <fieldset>
                <legend></legend>
            </fieldset>
        </div>
        <div id="tabs-2">
            <fieldset>
                <legend></legend>
            </fieldset>
        </div>
        <div id="tabs-3">
            <fieldset>
                <legend></legend>
                <table class="table-editor">
                    <tr>
                        <td class="td-horiz-label">@Html.LabelFor(model => model.Country.Description, new { @class = "label-horiz" })
                        </td>
                        <td class="td-horiz-field">
                            <input id="Country_Code" data-opus-id="@(Model.Country.Id)" class="editor-horiz searchInput" value="@(Model.Country.Description)" /><a
                                class="searchButton" href="#" id="btnCountry"></a>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div id="tabs-4">
            <fieldset>
                <legend></legend>
                <table class="table-editor">
                    <tr>
                        <td class="td-horiz-label">@Html.LabelFor(model => model.Theme.Name, new { @class = "label-horiz" })
                        </td>
                        <td class="td-horiz-field">
                            <select class="editor-horiz" data-val="true" data-val-required="The Theme field is required."
                                id="Theme" name="LanguageTheme">
                                @foreach (var item in ViewBag.Themes)
                                {
                                    if (@item.Code == @Model.Theme.Code)
                                    {
                                    <option value="@item.Code" selected="selected">@item.Name</option>
                                    }
                                    else
                                    {
                                    <option value="@item.Code">@item.Name</option>
                                    }
                                }
                            </select>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </div>

    <p>
        <br />
        <a id="saveButton">Update</a>
    </p>

   
    <div id="dialogCountry" title="" style="overflow: hidden;">
    </div>
@*
    <div id="dialogLanguage" title="" style="overflow: hidden;">
    </div>
    <div id="dialogDateFormat" title="" style="overflow: hidden;">
    </div>
    <div id="dialogMoneyFormat" title="" style="overflow: hidden;">
    </div>
*@
}
<script type="text/javascript">
    $(function () {
        ////////////////////////////////////////////////////////////////////////////////////
        // Country
        $("#dialogCountry").selectCountry('init', {
            'btn': 'btnCountry',
            'AutoCompleteElement': 'Country_Code',
            'ApplicationMessagesPartial': 'applicationMessagesUserProfile',
            'InputElement': 'Country_Code'
        });
/*
        ////////////////////////////////////////////////////////////////////////////////////
        // Language
        $("#dialogLanguage").selectLanguage('init', {
            'btn': 'btnLanguage',
            'AutoCompleteElement': 'Language_Code',
            'ApplicationMessagesPartial': 'applicationMessagesUserProfile',
            'InputElement': 'Language_Code'
        });

        ////////////////////////////////////////////////////////////////////////////////////
        // Money Format
        $("#dialogMoneyFormat").selectMoneyFormat('init', {
            'btn': 'btnMoneyFormat',
            'AutoCompleteElement': 'MoneyFormat_Code',
            'ApplicationMessagesPartial': 'applicationMessagesUserProfile',
            'InputElement': 'MoneyFormat_Code'
        });

        ////////////////////////////////////////////////////////////////////////////////////
        // DateFormat
        $("#dialogDateFormat").selectDateFormat('init', {
            'btn': 'btnDateFormat',
            'AutoCompleteElement': 'DateFormat_Code',
            'ApplicationMessagesPartial': 'applicationMessagesUserProfile',
            'InputElement': 'DateFormat_Code'
        });
*/
        ////////////////////////////////////////////////////////////////////////////////////
        // Password
        $("#changePassword,#cancelPassword").button();
        $("#showPassword").button({ icons: { primary: 'ui-icon-key' }, text: false }).click(function () {
            $("#newPasswordRow,#confirmPasswordRow,#changePasswordRow").toggle();
            $("#OldPassword").removeAttr('disabled', '').removeClass('ui-state-disabled');
            if ($("#showPassword").hasClass("ui-button-disabled"))
                $("#showPassword").button('enable');
            else
                $("#showPassword").button('disable');

            $("#OldPassword").focus();
        });

        $("#cancelPassword").click(function () {
            $("#newPasswordRow,#confirmPasswordRow,#changePasswordRow").toggle();
            $("#OldPassword").attr('disabled', 'disabled').addClass('ui-state-disabled');
            $("#OldPassword,#NewPassword,#ConfirmPassword").val('');
            if ($("#showPassword").hasClass("ui-button-disabled"))
                $("#showPassword").button('enable');
            else
                $("#showPassword").button('disable');

            $("#OldPassword").focus();
        });

        $("#changePassword").click(function () {
            var userName = $("#UserName").val();
            var oldP = $("#OldPassword").val();
            var newP = $("#NewPassword").val();
            var confirmP = $("#ConfirmPassword").val();

            $.ajax({
                type: "POST",
                url: "/AccountAdmin/ChangePassword",
                data: "{'userName':'" + userName + "','oldPassword':'" + oldP + "','newPassword':'" + newP + "','confirmPassword':'" + confirmP + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                //success: function (msg) {
                success: function () {
                    $.get('/Shared/ApplicationMessages', {}, function (view) {
                        $("#applicationMessagesUserProfile").html(view);
                    });
                    $('#cancelPassword').trigger('click');
                }
            });
        });

        ////////////////////////////////////////////////////////////////////////////////////
        // Form
        $("#saveButton").click(function () {
            $("#profileForm").validate();
            if ($("#profileForm").valid()) {
                $('#progressSpinner').dialog('open');
                $("#profileForm").submit();
            }
        });

        $("#saveButton").button();

        $("#tabs").tabs();
        $("#tabs div.ui-tabs-panel").css('height', 250);

        $("#OldPassword").focus();
    });
</script>
